<template>
     <div class="item" id="contact-user-list">
            <div class="items" v-for="item in userList" :key="item.id">
                <img v-bind:src="item.face" />
                <div class="text">{{ item.username }}</div>
            </div>

     </div>

</template>

<script>
export default {
  name: 'Contact',
  data:function()
  {
    return {
      userList:[{
             "username":"小叮做事小叮当",
             "face":"../../static/images/face_0.png",
             "id":"MmgqGVMDVNYwzTQeXcviqieIjxot0ZHO"
           },
           {
             "username":"发UP疯",
             "face":"../../static/images/face_1.png",
             "id":"V9Z7eebMOTp07EgdQpPoVkoKH6hPgNv4"
           },
           {
             "username":"李静",
             "face":"../../static/images/face_2.png",
             "id":"38YT0eLHwGCjViwQC6FuiDWZ6ERn6rBK"
           },
           {
             "username":"乱室佳人",
             "face":"../../static/images/face_3.png",
             "id":"tb5ihPHyTnM2NTTpp5v1zrUy0Jkr1yEM"
           },
           {
             "username":"三是两听",
             "face":"../../static/images/face_4.png",
             "id":"jTbs8cEABSqDqhzoNRAN1JyUxJeO9yE1"
           },
           {
             "username":"马什么梅",
             "face":"../../static/images/face_5.png",
             "id":"4xgbZn8g7JRD9AV4ugQbbCqtiZuMEChg"
           },
           {
             "username":"夏洛特没有烦恼",
             "face":"../../static/images/face_6.png",
             "id":"eeO1Nzh7TtbauEx3fpQXWCn5pdRVihJJ"
           },
           {
             "username":"什么冬梅",
             "face":"../../static/images/face_7.png",
             "id":"YWUHhrVPiJgPL1XnPS14pQ37qX2HEm6c"
           },
           {
             "username":"fong",
             "face":"../../static/images/face_8.png",
             "id":"5hkKvac7rewKxqx8wjvWagr5XFo755un"
           }
      ]

    }
    }


}
</script>

<style scoped>
   .item{
   width: 100%;
   height: calc(100% - 102px);
   overflow: hidden;
   overflow-y: auto;
   position: absolute;
   top: 40px;
   }
   .item .items{
         height: 60px;
        background: #fff;
        border-bottom: 1px  solid #a8a8ae;
        width: 98%;
        margin-left: 2%;
   }
   .item .items img{
      width: 40px;
      height:40px;
      border-radius: 5px;
      margin: 10px 15px;
      float: left;
   }
   .item .items .text{
      color: #000;
      float: left;
      line-height: 60px;

   }

</style>
